<template>
  <TablePage>
    <template #top>
      <SearchForm
        title="登录日志"
        :show-add-btn="false"
        :select-data="selectData"
        :keyword-search-data="[{ key: 'userName', label: '登录账号' }]"
        @search="search"
      />
    </template>
    <SlTable
      :columns="columns"
      row-key="infoId"
      :data-source="tableData"
      :pagination="pagination"
      :loading="tableLoading"
    >
      <template #bodyCell="{ column, record }: BodyCellOptions<PartialLoginLogItem>">
        <a-tag v-if="column.dataIndex === 'status'" :color="record.status === '1' ? 'error' : 'success'">
          {{ record.status === "1" ? "失败" : "成功" }}
        </a-tag>
      </template>
    </SlTable>
  </TablePage>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { useI18n } from "/@/locales/useI18n";
import { useCURD } from "/@/hooks/useCURD";
import { handleDateRowRender } from "/@/utils/common";
import type { TableProps } from "ant-design-vue";
import { PatternKey } from "/@/utils/verify";
import { Api } from "/@/api/home/log";
import type { LoginLogItem, PartialLoginLogItem } from "/@/api/home/log/models";
import type { BodyCellOptions } from "/@/types/antd";
import { LabelSelectType } from "/@/types/components";

const columns = ref<TableProps<LoginLogItem>["columns"]>([
  {
    title: "登录账号",
    dataIndex: "userName",
  },
  {
    title: "登录IP地址",
    dataIndex: "ipaddr",
  },
  {
    title: "登录地点",
    dataIndex: "loginLocation",
  },
  {
    title: "浏览器类型",
    dataIndex: "browser",
  },
  {
    title: "操作系统",
    dataIndex: "os",
  },
  {
    title: "提示消息",
    dataIndex: "msg",
  },
  {
    title: "状态",
    dataIndex: "status",
  },
  {
    title: "登录时间",
    dataIndex: "loginTime",
    customRender: handleDateRowRender,
  },
]);

const selectData = [
  {
    label: "操作时间",
    key: "dateRange",
    selectType: LabelSelectType.rangePicker,
    props: {
      showTime: {
        format: "HH:mm:ss",
      },
      format: "YYYY-MM-DD HH:mm:ss",
    },
  },
];
function search(model) {
  if (model.dateRange) {
    model.beginTime = model.dateRange[0];
    model.endTime = model.dateRange[1];
    delete model.dateRange;
  }
  reloadTable({
    model,
  });
}

const { pagination, tableData, tableLoading, reloadTable } = useCURD<LoginLogItem>({
  getPageUrl: Api.loginlogList,
  isResponse: true,
});
</script>
